<template>
  <div class="setting_authority-setting">
    <el-card shadow="never" class="bunk-info-info-container">
      <div class="role-list">
        <el-card shadow="never" class="bunk-info-list-card">
          <h3>角色列表</h3>
          <div class="role-list-content">
            <div v-for="item in roleList" :key="item.id" class="role-list-item" :class="{ 'role-list-active': activId === item.id}" @click="clickRole(item)">{{ item.name }}</div>
          </div>
        </el-card>
      </div>
      <div class="authority-list">
        <el-card shadow="never" class="bunk-info-list-card">
          <div class="authority-header">
            <h3>权限列表</h3>
            <el-button type="primary" size="small" @click="updateAuthority">保存</el-button>
          </div>
          <div class="authority-list-content">
            <vxe-table
              ref="treeTable"
              :key="key"
              resizable
              row-id="id"
              :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: false}"
              tree-config
              border
              highlight-hover-row
              highlight-current-row
              height="500"
              :data="value"
              header-align="center"
            >
              <vxe-table-column type="checkbox" field="checked" width="50" align="center" />
              <vxe-table-column tree-node field="name" width="300" title="功能名称" />
              <vxe-table-column field="remark" min-width="300" title="功能描述" />
            </vxe-table>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPageList } from '@/api/authority'
import { getPageList as getRoleList, getAuthorityById, modifyByRoleId } from '@/api/role'
export default {
  data() {
    return {
      defaultSelecteRows: [],
      value: [],
      roleList: [],
      activId: '',
      key: 0,
      roleCode: '',
      loading: false
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    clickRole(item) {
      this.roleCode = item.code
      if (item.id !== this.activeId) {
        this.activId = item.id
        this.getAuthority()
      }
    },
    getList() {
      this.loading = true
      getPageList().then(response => {
        this.key++
        this.value = response
        this.loading = false
      })
    },
    getRole() {
      getRoleList({
        pageNum: 1,
        pageSize: 10000
      }).then(response => {
        this.roleList = response.records
        this.activId = this.roleList[0].id
        this.getAuthority()
      })
    },
    getAuthority() {
      getAuthorityById({
        id: this.activId
      }).then(response => {
        this.getList()
        this.defaultSelecteRows = response
      })
    },
    updateAuthority() {
      if (this.roleCode === 'Administrator') {
        this.$message.error('该账户不允许修改！')
        return false
      }
      const selectRecords = this.$refs.treeTable.getCheckboxRecords().map(item => item.id)
      modifyByRoleId({
        roleId: this.activId,
        permissionIds: selectRecords
      }).then(response => {
        this.$message.success('修改成功')
      })
    }
  }
}
</script>

<style lang="scss">
.setting_authority-setting {
  display: flex;
  background: #fff;
  padding: 10px;
  h3 {
    font-size: 16px;
    font-weight: 400;
  }
  .bunk-info-info-container{
    width: 100%;
    .el-card__body{
      width: 100%;
       display: flex;
    }
  }
  .role-list {
    margin-right: 20px;
    width: 200px;
    .bunk-info-list-card{
      width: 100%;
      .el-card__body{
        display: block;
      }
    }
    .role-list-content {
      background: #fff;
      // padding: 10px;
      height: 500px;
      max-height: 500px;
      overflow-y: auto;
    }
    .role-list-item {
      // padding: 10px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      padding-left: 20px;
    }
    .role-list-item:hover {
      // color: #409eff;
      background-color: #F5F7FA;
    }
    .role-list-active {
      background: #edf6ff;
      color: #409eff;
    }
  }
  .authority-list {
    flex-grow: 1;
    .bunk-info-list-card{
      border-color: transparent;
      width: 100%;
      .el-card__body{
        display: block;
      }
    }
    .authority-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
